<template>
	<view class="newworkOrder_container">
		<view class="" style="height: 160rpx;">
			<view class="mail_List fixed z_ninetynine">
				<view class="mail" style="font-weight: 700;">
					<view class="order">新建工单</view>
				</view>
			</view>
			<view class="icon fixed z_ninetynine">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>
		</view>
		<!-- 巡更新建工单 -->
		<view class="card">
			<uni-card class="second_card" style="margin: 0;">
				<u-form :model="form" ref="uForm">
					<u-form-item label="小区地址:">
						<u-input v-model="form.address" :type="newList2==''? 'select' : 'text'" :select-open="show2"
							placeholder-style="color: #cccccc; text-align: right;"
							:placeholder="newList2==''? '请输入小区地址': newList2" @click="show2 = true" />
					</u-form-item>
					<u-form-item label="标题:">
						<u-input v-model="form.title" placeholder-style="color: #cccccc; text-align: right;"
							placeholder="请输入标题" />
					</u-form-item>
					<u-form-item label="事件描述:" label-position="top">
						<u-input v-model="form.describe" type="textarea"
							placeholder-style="color: #cccccc; text-align: left;" placeholder="请选择巡查/巡检/巡更异常" />
					</u-form-item>
				</u-form>
			</uni-card>
		</view>
		<view class="order_Allocation">
			<view class="data_Statistics" style="padding: 28rpx 24rpx 0 ;">{{ nowTime3 }}
				<text style="font-weight: 700; font-size: 30rpx; color: #c4c4c4;">丨</text><text
					style="font-weight: 700; font-size: 30rpx;">工单分配</text>
			</view>
			<view class="card">
				<uni-card class="second_card" style="margin: 0;">
					<u-form :model="form" ref="uForm">
						<u-form-item label="选择执行人:">
							<u-input v-model="form.Executor" :type="newList3==''? 'select' : 'text'"
								:select-open="show3" placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList3==''? '请选择执行人': newList3" @click="show3 = true" />
						</u-form-item>
						
						<u-form-item label="结束时间:">
							<u-input v-model="form.Maintenance" :type="newList5==''? 'select' : 'text'"
								:select-open="show5" placeholder-style="color: #cccccc; text-align: right;"
								:placeholder="newList5==''? '请选择结束时间': newList5" @click="show5 = true"  />
						</u-form-item>
						
						<view class="li">
							<text>结束时间</text>
							<view class="flex1">
<!-- 								<picker v-show="false" mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
									<view class="date">{{other}}</view>
								</picker> -->
							</view>
						</view>
						
						
<!-- 						        <input v-model="date" border @click="showTimePicker" disabled/>
						        <time-picker
						            ref="timePic" 
						            :params="params" 
						            :defaultTime="defaultTime" 
						            beginDate="2015-08" 
						            endDate="2019" 
						            v-model="timeShow" 
						            @confirm="timeConfirm"
						            @cancel="timeCancel"/> -->
					</u-form>
					<u-select v-model="show2" mode="single-column" :list="list2" @confirm="confirm2"></u-select>
					<u-select v-model="show3" mode="single-column" :list="list3" @confirm="confirm3"></u-select>
					<u-picker mode="time" v-model="show5" @confirm="confirm5"></u-picker>
													<!-- <view class="" v-if="show5"> -->
														<picker mode="date" :value="start_date" :start="start_date" v-if="show5" >
															<!-- <view class="date">{{other}}</view> -->
														</picker>
													<!-- </view> -->
					<!-- 结束时间 -->
					<!-- 			<view class="flex1">
				<picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
					<view class="date">{{other}}</view>
				</picker>
			</view> -->
					<!-- 				<u-select v-model="show4" mode="single-column" :list="list" @confirm="confirm4"></u-select>
					<u-select v-model="show5" mode="single-column" :list="list" @confirm="confirm5"></u-select> -->
				</uni-card>
			</view>

		</view>
		<view class="button">
			<u-button type="primary" style="flex: 1;">取消</u-button>
			<u-button type="success" style="flex: 1;" @click="determine">确定</u-button>
		</view>
	</view>
</template>

<script>
	    // import timePicker from '@/components/time-picker/time-picker.vue'
	export default {
		        // components:{
		        //     timePicker
		        // },
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				
				 // date: '点击选择时间',
				 //                hourBegin: '09',
				 //                hourEnd: '18',
				 //                defaultTime: '2021/06/25 17:12:00',
				 //                params:{
				 //                    year: true,
				 //                    month: true,
				 //                    day: true,
				 //                    hour: true,
				 //                    minute: true,
				 //                    second: true,
				 //                },
				 //                timeShow: false,
				
				
				
				start_date: currentDate,
				end_date: currentDate,
				other: '请选择结束时间',
				// form表单
				form: {
					// 关联异常
					type: '',
					type_two: '',
					address: '',
					address_two:'',
					title: '',
					describe: '',
					chargePerson: '',
					Executor: '',
					Maintenance: '',
					endTime: '',
					// 手机号码
					staffPhone: ''
				},
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				show: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				// 关联异常
				list: [{
						value: '0',
						label: '装修巡查'
					},
					{
						value: '1',
						label: '项目巡查'
					}
				],
				// 小区地址
				list2: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择执行人
				list3: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 小区地址
				newList2: '',
				// 选择执行人
				newList3: '',
				newList4: '',
				newList5: '',
				// 时间实时展示
				nowTime: "",
				nowTime2: "",
				nowTime3: "",
				// 待执行Id
				orderId: '',
				// 车辆详情
				particulars: '',
				// 审核通过
				staff: ''
			}
		},
		onLoad() {
			// 实时显示时间;
			// this.nowTimes();
			// 小区地址
			this.cellAddress();
			// 选择执行人
			this.Approved()
		},
		// onShow() {
		// },
		methods: {
			
			//             //显示picker
			//             showTimePicker(){
			
			//                 //方法一
			//                 this.timeShow = true
			
			//                 //方法二 
			//                 //this.$refs.timePic.open()
			//             },
			//             timeConfirm(e){
			//                 this.date = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
			//                 console.log(e);
			//             },
			//             timeCancel(e){
			//                 console.log(e);
			//             },
			
			
			
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
				this.other = this.end_date;
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 选择执行人
			Approved() {
				this.$http.get('WorkOrder/getStaff', {
					deptId: this.loginId.deptId
				}).then(res => {
					// console.log(res, '执行人')
					// this.particulars=res.data
					let lists = res.data
					this.list3 = this.changeKey(lists, ['value', 'label', 'staffPhone']);
				})
			},
			// 小区地址
			cellAddress() {
				this.loginId = uni.getStorageSync("setModel")
				this.$http.get('informationInquiry/selectCommunity', {
					deptId: this.loginId.deptId
				}).then(res => {
					console.log(res, '小区地址')
					// this.particulars=res.data
					let lists = res.data
					this.list2 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			// 小区地址
			confirm2(e) {
				console.log(e)
				this.form.address = e[0].label
				this.form.address_two = e[0].value
			},
			// 选择执行人
			confirm3(e) {
				// console.log(e);
				let sign = ''
				e.forEach((item, index) => {
					this.sign = item.value
					this.form.Executor = item.label
					// console.log(item.label);
					// console.log(this.sign);
				})
				this.list3.forEach((item, index) => {
					if (item.value == this.sign) {
						console.log(item.staffPhone)
						this.form.staffPhone = item.staffPhone
					}
				})
				// console.log(e-'1')
				// let abc = this.list[e-'1'].staffPhone
				// console.log(abc)
			},
			// 结束时间
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm5(e) {
				console.log(e);
				this.form.endTime = `${e.year}-${e.month}-${e.day}`
				console.log(this.form.endTime)
			},
			// 点击确定
			determine() {
				// this.show2 = true
				// console.log(171)
				this.$http.post('Patrol/insertPatrol', {
					phone: this.form.staffPhone,
					endTime: this.other,
					patrolType: '2',
					patrolName: this.form.title,
					patrolInfo: this.form.describe,
					communityId: this.form.address_two,
					// orderId:this.orderId
				}).then(res => {
					console.log(res, '新增巡查工单')
					// this.particulars=res.data
				})
				// setTimeout(function() {
				uni.navigateBack()
				// }, 1000);
			},
			changeKey(lists, key) {
				let newArr = [];
				lists.forEach((item) => {
					let newObj = {};
					for (var i = 0; i < key.length; i++) {
						newObj[key[i]] = item[Object.keys(item)[i]]
					}
					newArr.push(newObj);
				})
				return newArr;
			},
			navigateBack() {
				uni.navigateBack()
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
		}
	}
</script>

<style lang="scss" scoped>
	.newworkOrder_container {

		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #999999;
				font-size: 40rpx;
				background-color: #e5e5e5;
			}

			.order {
				text-align: center;
			}
		}

		/deep/.card {

			// .u-form-item:nth-child(4) {
			// 	.u-input__input {
			// 		text-align: unset!important;
			// 	}
			// 	textarea {
			// 		text-align: unset!important;
			// 	}
			// }
			.li {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #efefef;

				 text {
					padding: 40rpx 0;
					font-size: 34rpx;
					font-family: '黑体';
				}

				 .flex1 {
					flex: 1;
					text-align: right;
					padding-right: 25rpx;
					color: #999999;
					font-size: 32rpx;
				}

			}

			u-form-item {
				.u-input {
					input {
						text-align: right !important;
					}

				}
			}

			.u-form-item--left {
				flex: unset !important;
				width: unset !important;
			}
		}

		.order_Allocation {
			/deep/.card {
				u-form-item {
					.u-input {
						input {
							text-align: right !important;
						}

					}
				}
			}
		}

		.icon {
			position: absolute;
			top: 18rpx;
			// top: 114rpx;
			left: 20rpx;
		}

		/deep/.second_card {
			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 18rpx 32rpx;
			}

			.uni-card__content {
				padding: 0 24rpx !important;
			}
		}

		/deep/.uni-border {
			border-radius: unset !important;
			margin: 24rpx 0 !important;
		}

		.uni-border[data-v-19622063]:after {
			border: unset;
		}

		/deep/.uni-border.data-v-19622063:after {
			border: unset;
		}

		.slot-btn {
			display: flex;
			flex-direction: column;
			width: 200rpx;
			height: 280rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #e5e5e5;

			.add_Photo {
				margin-top: 10rpx;
				color: #cccccc;
			}
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		/deep/.button {
			display: flex;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			// margin-top: 200rpx;
			border-radius: 14rpx;
			overflow: hidden;
			// z-index: 9;

			.u-btn {
				border-radius: unset;
			}
		}
	}
</style>
